<template>
    <el-header>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :value="false">expand</el-radio-button>
        <el-radio-button :value="true">collapse</el-radio-button>
      </el-radio-group>
    </el-header>
  </template>
  <script setup lang="ts">
  import { ref, defineEmits, defineProps, watchEffect } from 'vue'
  const emits = defineEmits(['cosChnage'])
  const props = defineProps(['cos'])
  // emits('cosChnage',true)
  const isCollapse = ref(props.cos)
  
  // 监听组件内部自己的 isCollapse 改变
  // 一旦改变，通知父组件---并且传入最新的 折叠状态
  watchEffect(() => {
    // isCollapse.value
    emits('cosChnage', isCollapse.value)
  })
  </script>
  <style lang="css" scoped>
  .el-header {
    position: relative;
  }
  .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    position: absolute;
  }
  </style>
  